<template>
  <div class="bgc scroll">
    <template v-if="currentViewId > 0">
      <v-stage :config="configKonva">
        <v-layer>
          <v-image :config="configImage" />
        </v-layer>

        <v-layer ref="layer">
          <v-group v-for="(item,index) in layers" :key="index">
            <v-rect :config="item.rect" @click="handleClick(index)" />
            <v-text :config="item.name" @click="handleClick(index)" />
            <v-text :config="item.value" @click="handleClick(index)" />
            <v-text :config="item.timestamp" @click="handleClick(index)" />
          </v-group>
        </v-layer>
      </v-stage>
    </template>
  </div>
</template>

<script>
import { view_show } from '@/api/plan_view'
import { formatDate } from 'element-ui/src/utils/date-util'
export default {
  data() {
    return {
      configKonva: {
        width: 800,
        height: 600
      },
      configImage: {
        x: 0,
        y: 0,
        image: null,
        width: 800,
        height: 600,
        zIndex: 9
      },
      layers: [],
      viewInfo: this.$store.state.view.viewInfo
    }
  },
  computed: {
    currentViewId: function() {
      return this.$store.getters.currentViewId
    }
  },
  watch: {
    currentViewId(newValue, oldValue) {
      if (newValue !== oldValue && newValue !== 0) {
        this.getViewSensors()

        const image = new window.Image()
        image.src = process.env.VUE_APP_BASE_API + this.$store.state.view.currentViewPath
        image.onload = () => {
          this.configImage.image = image
          this.configImage.width = image.width
          this.configImage.height = image.height

          this.configKonva.width = image.width
          this.configKonva.height = image.height
        }
      }
    }
  },
  created() {
    if (this.$route.query.project_id && this.$route.query.view_id) {
      this.getViewSensors()
      const image = new window.Image()
      image.src = process.env.VUE_APP_BASE_API + this.$store.state.view.currentViewPath
      image.onload = () => {
        this.configImage.image = image
        this.configImage.width = image.width
        this.configImage.height = image.height

        this.configKonva.width = image.width
        this.configKonva.height = image.height
      }
    }
  },
  methods: {
    getViewSensors() {
      view_show(this.$route.query.project_id, this.$route.query.view_id).then(res => {
        this.layers = []
        for (let i = 0; i < res.data.length; i++) {
          const timeText = 'Time:' + formatDate(res.data[i].timestamp * 1000, 'yyyy-MM-dd HH:mm:ss').toString()
          const valueText = 'Value:' + res.data[i].value
          const width = Math.max(timeText.length, res.data[i].sensor_name.length) * 16 * 0.5 + 14
          let color = 'green'
          if (res.data[i].alarm === '橙色预警') {
            color = 'orange'
          } else if (res.data[i].alarm === '红色预警') {
            color = 'red'
          } else if (res.data[i].alarm === '黑色预警') {
            color = 'black'
          }

          this.layers.push({
            sensor_id: res.data[i].sensor_id,
            name: { fontSize: 16, x: res.data[i].x, y: res.data[i].y, text: res.data[i].sensor_name, fill: '#fff' },
            timestamp: { fontSize: 16, x: res.data[i].x, y: res.data[i].y + 36, text: timeText, fill: '#fff' },
            value: { fontSize: 16, x: res.data[i].x, y: res.data[i].y + 18, text: valueText, fill: '#fff' },
            rect: { x: res.data[i].x - 10, y: res.data[i].y - 10, width: width, height: 66, fill: color, stroke: 'black', strokeWidth: 1, cornerRadius: 2 }
          })
        }
      })
    },
    handleClick(index) {
      console.log(this.layers[index].sensor_id)
    }
  }
}
</script>

<style scoped lang="scss">
.scroll{
  width: 100%;
  height: calc(100vh - 128px);
  overflow: auto;
}
</style>
